<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<form class="layui-form-item" style="width: 600px;margin: 0 auto">
    <input type="text" class="layui-input" name="roleName"/><br>
    <input type="password" class="layui-input" name="rolePassword" placeholder="请输入原密码"/>
    <label id="pwdTip" style="color: red"><br>
    </label>
    <input type="password" class="layui-input" name="roleNewPwd" placeholder="请输入新密码"/><br>
    <input type="button" class="layui-input" id="btn" value="修改"/>
</form>
<script>
    $(function (){
        let admin = sessionStorage.getItem("roleName");
        $("#roleName").val(admin);
        $('#roleNewPwd').on('change',function (){
            if ($('#rolePassword').val() == ''){
                $('#rolePassword').focus().css('borderBottom','red');
                $('#pwdTip').text("请输入原密码")
            }
        })
        $('#rolePassword').on('change',function (){
            $('#rolePassword').focus().css('borderBottom','#000');
            $('pwdTip').text('');
        })
        $('#btn').on('click',function (){
            $.post('../role/checkPwd',{pwd:$('#rolePwd').val(),newPwd:$('#roleNewPwd').val(),userName:$('#roleName').val()},function (res){
                if (res.code === 200){
                    // 弹出提示框
                    layer.msg("修改成功,请重新登录", {icon: 6})

                    setTimeout(() => {
                        top.location.href = 'login.html';
                    }, 2000);
                }else if(res.code === 101){
                    $('#rolePwd').val('');
                    $('#roleNewPwd').val('');
                    $('pwdTip').text('密码错误，请重新输入！');
                }
            })
        })
    })
</script>
</body>
</html>